<template>
    <div>
        <el-menu router :default-active="$router.resolve({ name: 'list' }).href" class="el-menu-vertical-demo" text-color="#bfcbd9"
            active-text-color="rgb(64, 158, 255)" mode="horizontal">
            <el-menu-item :index="$router.resolve({ name: 'list' }).href">
                <i class="el-icon-menu"></i>
                <span>歌单队列</span>
            </el-menu-item>
            <el-menu-item :index="$router.resolve({ name: 'data' }).href">
                <i class="el-icon-tickets"></i>
                <span>数据</span>
            </el-menu-item>
            <el-menu-item :index="$router.resolve({ name: 'config' }).href">
                <i class="el-icon-setting"></i>
                <span>设置</span>
            </el-menu-item>
            <div class="button-list">
                <el-button class="button-help" style="float: right" type="primary" icon="el-icon-s-promotion" @click="help">帮助</el-button>
                <el-button class="button-yulan" style="float: right" type="success" icon="el-icon-s-platform" @click="preview">预览</el-button>
            </div>

        </el-menu>
        <el-main>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </el-main>
    </div>

</template>


<script>
export default {
  data() {
    return {
    }
  },
  created() {
    console.log()
  },
  methods: {
    // 帮助 主要是用于解释点歌姬用法
    help() {
      console.log('help')
    },
    // 预览 用于展示点歌列表
    preview() {
      console.log('preview')
    }

  }
}

</script>

<style>
/* .container {
    display: flex;
    justify-content: center;
} */
.button-list .el-button{
    margin: 5px 0 0 5px;
}
.button-list .el-button--primary {
    background: #a855f7;
    border: 1px solid #A855F7;
}
.button-list .el-button--success{
    background: #f97316;
    border: 1px solid #f97316;
}
/* .button-yulan{
    background: #a855f7;
    border: 1px solid #A855F7;
} */
</style>
